<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import ImagePreview from "./ImagePreview.svelte";
    import { fn } from "storybook/test";
    import { Row } from "../Row";
    import { Col } from "../Col";
    import img1 from "../../assets/images/1.jpg";
    import img2 from "../../assets/images/2.jpg";
    import img3 from "../../assets/images/3.jpg";
    import img4 from "../../assets/images/4.jpg";
    import img5 from "../../assets/images/5.jpg";
    import img6 from "../../assets/images/6.jpg";
    import img7 from "../../assets/images/7.jpg";
    import img8 from "../../assets/images/8.jpg";
    import img9 from "../../assets/images/9.jpg";
    import img10 from "../../assets/images/10.jpg";
    import { Button } from "../Button";
    import { Spin } from "../Spin";
    import { Space } from "../Space";

    const { Story } = defineMeta({
        title: "Components/Views/ImagePreview",
        component: ImagePreview,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let visible = $state(false);
</script>

<Story name="Default">
    {#snippet template(args)}
        {@const verticalUrlList = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10]}
        <Space dir="h" wrap>
            <Button
                type="primary"
                onclick={() => {
                    visible = true;
                }}>打开</Button
            >
            <ImagePreview bind:visible previewList={verticalUrlList} />
        </Space>
    {/snippet}
</Story>
